<!-- 行程编辑模态框 -->
<template>
  <div v-if="modelValue" class="fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
      <!-- 背景遮罩 -->
      <div class="fixed inset-0 transition-opacity" @click="closeModal">
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
      </div>

      <!-- 模态框内容 -->
      <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <h3 class="text-lg font-medium mb-4">{{ trip ? '编辑行程' : '创建新行程' }}</h3>
          
          <form @submit.prevent="handleSubmit" class="space-y-4">
            <!-- 行程名称 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">行程名称</label>
              <input 
                v-model="formData.name"
                type="text"
                required
                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                placeholder="给您的行程起个名字"
              />
            </div>

            <!-- 行程描述 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">行程描述</label>
              <textarea 
                v-model="formData.description"
                rows="3"
                required
                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                placeholder="简单描述一下行程安排"
              ></textarea>
            </div>

            <!-- 行程天数 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">行程天数</label>
              <input 
                v-model="formData.duration"
                type="text"
                required
                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
                placeholder="例如：2天"
              />
            </div>

            <!-- 行程状态 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">行程状态</label>
              <select 
                v-model="formData.status"
                required
                class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
              >
                <option v-for="status in statusOptions" :key="status" :value="status">
                  {{ status }}
                </option>
              </select>
            </div>
          </form>
        </div>

        <!-- 按钮区域 -->
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button 
            @click="handleSubmit"
            class="w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
          >
            {{ trip ? '保存修改' : '创建行程' }}
          </button>
          <button 
            @click="closeModal"
            class="mt-3 w-full inline-flex justify-center rounded-lg border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
  modelValue: boolean
  trip?: {
    id: number
    name: string
    description: string
    duration: string
    status: string
  } | null
  statusOptions: string[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'submit', data: any): void
}>()

const formData = ref({
  name: '',
  description: '',
  duration: '',
  status: props.statusOptions[0]
})

// 监听 trip 属性变化，更新表单数据
watch(() => props.trip, (newTrip) => {
  if (newTrip) {
    formData.value = { ...newTrip }
  } else {
    formData.value = {
      name: '',
      description: '',
      duration: '',
      status: props.statusOptions[0]
    }
  }
}, { immediate: true })

const closeModal = () => {
  emit('update:modelValue', false)
}

const handleSubmit = () => {
  emit('submit', { ...formData.value })
  closeModal()
}
</script> 
</script> 